<template>
  <div class="create-group-main">
    <div class="nav-back-header">
      <div class="back-title">
        <div class="back-button">
          <img class="back-cover" src="@/assets/images/arrow-left.png" @click="gotoPage"/>
        </div>
        <strong >新建普通群活码</strong>
      </div>
      <div class="step-rows">
        <div :class="['step-item', active === index && 'active']" v-for="(step, index) in stepList" :key="index">
          <img v-if="active > index" class="step-icon" src="@/assets/images/step_check.png" />
          <span class="step-num" v-else>{{ index + 1 }}</span>
          <div :class="['step-text', active > index && 'step-after']">{{ step }}</div>
          <div class="step-tail"></div>
        </div>
      </div>
      <div class="empty-space" />
    </div>
<!--    分组活码-->
    <LotGroupForm v-if="$route.query.group_switch==1" :active="active" />
<!--    普通活码-->
    <GeneraClasslForm v-if="$route.query.group_switch==0" :active="active"></GeneraClasslForm>
    <div class="create-footer">
      <div class="flex-rows-buttons">
        <el-button plain size="small" v-if="active > 0" @click="onHandlePrev">上一步</el-button>
        <el-button type="primary" size="small" v-if="active === stepList.length-1">保存</el-button>
        <el-button type="primary" size="small" v-else @click="onHandleNext">下一步</el-button>
      </div>
    </div>

  </div>
</template>
<script>
import GeneraClasslForm from './components/GeneraClasslForm.vue'
import LotGroupForm from './components/LotGroupForm.vue'
export default {
  data(){
    return {
      active: 0,
      stepList: ['基本设置','扫码页设置', '群和规则设置'],
      isMore: false,
      form: {
        mode: 0,
        imageUrl: 'https://cdn.llxzl.com/goods/user/4/20200908/e39d825369deb1e717c789cd8bc5ea60.jpg'
      },
    }
  },
  components: {
    LotGroupForm,
    GeneraClasslForm,
  },
  created() {

  },
  methods: {
    gotoPage(){
      this.$router.push({
        path:'/hook/live-code',
      })
    },
    onHandleNext() {
      this.active += 1
    },
    onHandlePrev() {
      this.active -= 1
    },
  }
}
</script>
<style lang="scss" scoped>
.create-group-main {
  position: relative;
  height: calc(100vh - 48px);
  overflow: auto;
  .nav-back-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 8;
    height: 46px;
    padding: 0 20px;
    background: #fff;
    border-bottom: 1px solid #e9e9e9;
    .back-title {
      display: flex;
      align-items: center;
      font-size: 14px;
      line-height: 22px;
      width: 250px;
      .back-button {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        margin-right: 12px;
        border: none;
        width: 24px;
        height: 24px;
        background: #4b5a95;
        border-radius: 12px;
        cursor: pointer;
        .back-cover {
          width: 16px;
          height: 16px;
        }
      }
    }
    .step-rows {
      display: flex;
      align-items: center;
      .step-item {
        display: flex;
        align-items: center;
        margin-right: 12px;
        &:last-child {
          .step-tail {
            display: none;
            width: 0;
          }
        }
        &.active {
          .step-num {
            background: #3070ff;
            border-color: #3070ff;
            color: #ffffff;
          }
          .step-text {
            color: rgba(0, 0, 0, .85);
          }
        }
        .step-icon {
          width: 24px;
          height: 24px;
          margin: 0 8px 0 0;
        }
        .step-after {
          color: rgba(0, 0, 0, .65) !important;
        }
        .step-num {
          width: 24px;
          height: 24px;
          margin: 0 8px 0 0;
          font-size: 12px;
          line-height: 24px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          background-color: #fff;
          border: 1px solid rgba(0, 0, 0, .25);
        }
        .step-text {
          padding-right: 12px;
          font-size: 14px;
          line-height: 24px;
          color: rgba(0,0,0,.45);
        }
        .step-tail {
          width: 40px;
          outline: none;
          height: 1px;
          position: relative;
          &::after {
            position: absolute;
            display: block;
            width: 100%;
            height: 1px;
            background: #e9e9e9;
            content: "";
            left: 0;
            top: 0;
            bottom: 0;
          }
        }
      }
    }
    .empty-space {
      width: 250px;
    }
  }

  .create-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ffffff;
    padding: 12px 16px;
    .flex-rows-buttons {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
<style>
.create-avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.create-avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
</style>
